<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  import personal from "../components/personal.vue";
  import topNav from "../components/topNav.vue"
  import RandomBlogComponent from "../components/RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"
  import axios from "axios";

  export default {
    data() {

      return{
        info:'## 我\n' +
          '- 身份：普通大学的普通大学生\n' +
          '\n' +
          '- 爱好：喜欢踢球、喜欢写BUG⌨、喜欢被代码折磨\n' +
          '\n' +
          '- 音乐：喜欢Bren Joy🎧、喜欢Rich Brian🎤\n' +
          '\n' +
          '- 技术栈：东摸摸西学学\n' +
          '\n' +
          '\n' +
          '## 胡说八道\n' +
          '\n' +
          '本着赚马内的目的进入计算机专业😅，突然发现  \n' +
          '这东西好像有点好玩😶‍🌫️   \n' +
          '现状：电子阳痿，唯一热衷于代码（是真的好玩），喜欢学新的技术栈，喜欢写一些奇奇怪怪的小东西🤗\n' +
          '\n' +
          '## 关于博客\n' +
          '[RoCBlog](www.rocblog.cn)\n' +
          '\n' +
          '完成耗时：20天\n' +
          '\n' +
          '其实是个我一边学vue一边写出来的东西，前期因为对vue的理解不足，边查边写，写起来有点痛苦🤮' +
          '，但写了两三天基本就熟悉了vue的基本写法，后面就呼哧呼哧写，写到一半发现底层架构有点问题，又重新改底层🤮。\n' +
          '自从改了底层，后面写着就快多了。  \n' +
          '大部分时间在纠结前端怎么写好看（励志做后端工程师，却对前端十分执着）\n' +
          ' \n' +
          '博客托管于腾讯云轻量云服务器🚀，水管小，有点慢别介意🤕    \n' +
          '至此，本站用于记录以后值得记录的东西🌍\n',
        commentList:[],
        commentListLength:'',
        replyCommentId:'',
        replyFlag:false,
        replyNickname:'',
        commentInput:{
          content:'',
          qq:'',
          email:''
        },
        pickerShow:false,
        audio: {
          name: '东西（Cover：林俊呈）',
          artist: '纳豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        }
      }
    },
    components: {
      personal,
      topNav,
      RandomBlogComponent,
      bottomInfo
    },
    methods: {
      showEmojiPicker() {
        if(this.pickerShow==false) {
          this.pickerShow=true;
        } else {
          this.pickerShow=false;
        }
      },
      selectEmoji(emoji) {// 选择emoji后调用的函数
        let input = document.getElementById("comment-input")
        let startPos = input.selectionStart
        let endPos = input.selectionEnd
        let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
        input.value = resultText
        input.focus()
        input.selectionStart = startPos + emoji.data.length
        input.selectionEnd = startPos + emoji.data.length
        this.text = resultText
      },
      uploadComment() {
        //检查QQ号是否为空
        if(this.commentInput.qq.length==0) {
          this.$message('QQ号不能为空')
          return
        }
        //检查邮箱是否为空
        if(this.commentInput.email.length==0) {
          this.$message('邮箱不能为空')
          return
        }
        //检查评论是否为空
        if(this.commentInput.content.length==0) {
          this.$message('评论不能为空')
          return
        }
        //发送请求
        var formData=new FormData()
        formData.append('qq',this.commentInput.qq);
        formData.append('email',this.commentInput.email);
        formData.append('content',this.commentInput.content);
        //检查是回复评论还是评论文章
        //blog_id为14560的是关于的评论
        if(this.replyFlag===false) {
          formData.append('blogId',14560);
          axios.put('/upload/comment',formData).then(res =>{
            if(res.data.code) {
              if(res.data.code==200) {
                this.$message('评论成功')
                this.$router.go(0)
              } else if(res.data.code==501) {
                this.$message('QQ号码错误，请检查后重试')
              }
            }
          })
        } else {
          console.log(this.replyCommentId)
          formData.append('commentId',this.replyCommentId);
          axios.put('upload/reply',formData).then(res =>{
            if(res.data.code) {
              if(res.data.code==200) {
                this.$message('回复成功')
                this.$router.go(0)
              }
            }
          })
        }
      },
      getComment() {
        axios.post("/getcomment",this.$qs.stringify({blogId:14560})).then(res =>{
          console.log(res.data.data)
          this.commentList=res.data.data
          this.commentListLength=res.data.data.length
        })
      },
      replyThis(event) {
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 1600,
          left: 0
        });
        this.replyFlag=true;
        this.replyCommentId = event.currentTarget.id
        var nickname=event.currentTarget.getAttribute("nickname")
        this.replyNickname=nickname;
      },
      noReply() {
        this.replyFlag=false;
      },
    },
    mounted() {
      this.getComment()
    }
  }
</script>

<template>
  <div ref="app" class="app" style="background: white;overflow-x: hidden">
    <topNav></topNav>
    <div class="as">
      <div class="abq">About</div>
      <div style="position: absolute;bottom: 0;width: 100%;height:100px;background: white;padding: 0;border-top-right-radius: 100%;border-top-left-radius: 100%">
      </div>
    </div>
    <el-container class="middle" style="min-height: 100vh;">
      <div class="al">
        <div style="display: flex">
          <div style="width: 6px;height: 30px;background-color: darkred;margin-top: 5px;margin-right: 10px;user-select: none;border: solid white;box-shadow: 0 0 5px goldenrod"></div>
          <div class="altitle">About</div>
        </div>
        <v-md-preview :text="info">

        </v-md-preview>
      </div>
    </el-container>
    <div class="comment" style="margin-top: 20px;margin-bottom: 50px;box-shadow: none;border-left: none;border-right: none;border-radius: 0;border-bottom: none">
      <div style="font-size: 20px;font-weight: 550;margin-bottom: 20px;display: flex">评论<div style="margin-left: 10px;font-size: 13px;margin-top: 6px;color: grey;font-weight: normal">{{commentListLength}}</div></div>
      <div class="post-comment">
        <div v-show="replyFlag" style="margin-left: 50px;height: 20px;text-align: start;border-radius: 10px;font-size: smaller;display: flex;color: grey">回复 <div style="margin-left:10px;color: #409eff" >@{{replyNickname}}</div><i @click="noReply" class="el-icon-close" style="margin-top: 2.5px;margin-left: 5px;cursor: pointer"></i></div>
        <el-image @click="showEmojiPicker" class="comment-headshot" :src="require('../assets/images/emoji.png')"></el-image>
        <el-input v-model="commentInput.content" id="comment-input" type="textarea" rows="2" resize="none" placeholder="随意发表下评论呗~" style="font-size: 13px;margin-left: 10px;user-select: none;width: 80%;border-radius: 20px"></el-input>
        <el-button @click="uploadComment">发表</el-button>
        <i class="el-icon-my-friend nav-icon" style="margin-left: 25px;position: relative;top: 8px"></i>
        <input class="qq" v-model="commentInput.qq" placeholder="输入QQ号自动获取头像昵称"></input>
        <i class="el-icon-my-email nav-icon" style="margin-left: 20px;position: relative;top: 8px"></i>
        <input class="email" v-model="commentInput.email" placeholder="输入邮箱获取回复通知"></input>
        <VEmojiPicker @select="selectEmoji" v-show="pickerShow" style="position: absolute;left: 5%;z-index: 999;top: 150px;height: 200px;"/>
      </div>
      <div class="one-comment" v-for="item in commentList">
        <div class="info">
          <el-image class="comment-headshot" :src="item.headshot"></el-image>
          <div style="margin-top: 10px;font-size: 9px;font-weight: 600;color: #61666d;margin-left: 15px;position: relative;top: 15px">{{item.nickname}}</div>
          <div class="one-content">
            {{item.content}}
          </div>
          <div class="comment-time">
            {{item.time}}
          </div>
          <div class="comment-reply" @click="replyThis($event)" :id="item.id" :nickname="item.nickname">
            回复
          </div>
          <div class="reply" v-for="rep in item.replyList">
            <el-image class="reply-headshot" :src="rep.headshot"></el-image>
            <div style="font-size: 9px;font-weight: 600;color: #61666d;margin-left: 10px;margin-top: 3px">{{rep.nickname}}</div>
            <div class="reply-content">
              {{rep.content}}
            </div>
            <div class="reply-time">
              {{ rep.time }}
            </div>
          </div>
          <!--              <div class="reply-more">共86条回复，<span class="asd">点击查看</span></div>-->
        </div>
      </div>
    </div>
    <bottomInfo></bottomInfo>
  </div>
</template>

<style>
  @import "animate.css";
  @import "../assets/common.css";
  @import "../assets/detail.css";
</style>
<style>
  @import "../assets/about.css";
</style>
